<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 800px;
			height: 600px;
			border: 1px solid red;
			margin: 0 auto;
			position: relative;
		}
		.sheep{
			width: 50px;
			height: 80px;
			background-color: red;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		.coin{
			width: 40px;
			height: 40px;
			position: absolute;
			top: -30px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="sj"></div>
		<div class="sheep" style="top: 520px;"></div>
	</div>
</body>
<script type="text/javascript">
	// 方向键可以控制羊移动
	// 1、羊跟随键盘左右键移动
	var box = document.getElementsByClassName("box")[0];
	var sheep = document.getElementsByClassName("sheep")[0];
	var coin = document.getElementsByClassName("coin");
	var sj = document.getElementsByClassName("sj")[0];
	var kLeft = false;
	var kRight = false;
	var kTop = false;
	var kBottom = false;
	document.onkeydown = function(ev){
		var keyCode = ev.keyCode;
		if (keyCode == 37) {
			kLeft = true;
		}
		var keyCode = ev.keyCode;
		if (keyCode == 38) {
			kTop = true;
		}
		var keyCode = ev.keyCode;
		if (keyCode == 39) {
			kRight = true;
		}
		var keyCode = ev.keyCode;
		if (keyCode == 40) {
			kBottom = true;
		}
	}
	document.onkeyup = function(ev){
		var keyCode = ev.keyCode;
		if (keyCode == 37) {
			kLeft = false;
		}
		var keyCode = ev.keyCode;
		if (keyCode == 38) {
			kTop = false;
		}
		var keyCode = ev.keyCode;
		if (keyCode == 39) {
			kRight = false;
		}
		var keyCode = ev.keyCode;
		if (keyCode == 40) {
			kBottom = false;
		}
	}
	setInterval(function(){
		var x = sheep.offsetLeft;
		var y = sheep.offsetTop;
		if (kLeft) {
			x -= 5;
		}
		if (kRight) {
			x += 5;
		}
		if (kTop) {
			y -= 5;
		}
		if (kBottom) {
			y += 5;
		}
		x = x < 0 ? 0 : x > 750 ? 750 : x;
		sheep.style.left = x +"px";
		y = y < 0 ? 0 : y > 520 ? 520 : y;
		sheep.style.top = y +"px";
	},20)
	// 会有金币停地下落
	// 1、一个金币下落。left位置随机
	// 3、金币的下落速度不同
	// 多个金币下落
	 var creatJB = setInterval(function(){
		var newCoin = document.createElement("div");
		newCoin.className = "coin";
		// 2、金币的类型不同
		var typeNum = Math.random()*20;
		if (typeNum > 19) {
			// 黑色是炸弹
			newCoin.style.color = "black";
			newCoin.style.backgroundImage = "url(img/zd.png)";
		} else if (typeNum > 18) {
			// 蓝色是加时
			newCoin.style.color = "blue";
			newCoin.style.backgroundImage = "url(img/js.png)";
		} else if (typeNum > 17) {
			// 绿色是磁铁
			newCoin.style.color = "green";
			newCoin.style.backgroundImage = "url(img/xx.png)";
		} else if (typeNum > 0) {
			// 金币是金色
			newCoin.style.color = "gold";
			newCoin.style.backgroundImage = "url(img/jb.png)";
		}
		newCoin.style.left = parseInt(Math.random()*760) + "px";
		box.appendChild(newCoin);//记得获取box
		var speed = parseInt(Math.random()*3+2);
		newCoin.downTimer = setInterval(function(){
			var y = newCoin.offsetTop;
			y += speed;
			newCoin.style.top = y + "px";
			if (y > 560) {
				clearInterval(newCoin.downTimer);
				newCoin.remove();
			}
			// 检测当前金币下落的过程有没有和羊碰到
			// sheep	newCoin;
			if (sheep.offsetLeft + sheep.offsetWidth > newCoin.offsetLeft && sheep.offsetLeft < newCoin.offsetLeft + newCoin.offsetWidth && sheep.offsetTop < newCoin.offsetTop + newCoin.offsetHeight && sheep.offsetTop + sheep.offsetHeight > newCoin.offsetTop) {
				// 碰到了
				newCoin.remove();
				clearInterval(newCoin.downTimer);
				// 羊碰到不同的金币有不同的反应
				// 碰到金币->加分
				// 碰到闹钟->加时
				// 碰到炸弹->结束
				// 碰到磁铁->吸金币
				var bgColor = newCoin.style.color;
				if (bgColor == "black") {
					// 不会在生成金币
					clearInterval(creatJB);
					// 让所有金币停止下落
					for (var i = 0; i < coin.length; i++) {
						clearInterval(coin[i].downTimer);
					}
				} else if (bgColor == "blue") {
					// 加时间
				} else if (bgColor == "green") {
					// 吸星大法
					// 让所有正常金币去羊的位置
					var currentCoin = document.querySelectorAll(".coin");
					for (var i = 0; i < currentCoin.length; i++) {
						(function(i){
							if (currentCoin[i].style.color == "gold") {
								clearInterval(currentCoin[i].downTimer);
								setTimeout(function(){
									currentCoin[i].remove();
								},1000)
								var count = 0;
								var flowTomer = setInterval(function(){
									var x = sheep.offsetLeft - currentCoin[i].offsetLeft;
									var y = sheep.offsetTop - currentCoin[i].offsetTop;
									currentCoin[i].style.left = currentCoin[i].offsetLeft + x * (count + 1) / 20 + "px";
									currentCoin[i].style.top = currentCoin[i].offsetTop + y * (count + 1) / 20 + "px";
									count++;
									if (count>=20) {
										clearInterval(flowTomer);
									}
								},50);
							}
						})(i)
					}
				} else {
					// 正常的金币 加分
				}
			}
		},20)
	},200)

	// 时间
	var num=60;
	function xn(){
		var time = setInterval(function(){
			num--;
			if (num<0) {
				clearInterval(time);
				alert("游戏结束");
			} else {
				sj.innerHTML="倒计时:" + num;
			}
		},1000)
	}
	xn();
</script>
</html>